<template>
  <view class="address-form p24" :data-theme="theme()" :class="theme() || ''">
    <form @submit="formSubmit" @reset="formReset">
      <view class="bg-white p-0-30 f30">
        <view class="d-s-c border-b-d9">
          <text class="key-name">{{ $t('user.recipient') }}</text>
          <input class="ml20 flex-1 f32 p-30-0" name="name" type="text" placeholder-class="grary9"
            v-model="address.name" :placeholder="$t('user.enter_recipient_name')" />
        </view>
        <view class="d-s-c border-b-d9">
          <text class="key-name">{{ $t('user.contact_info') }}</text>
          <input class="ml20 flex-1 f32 p-30-0" name="phone" type="text" placeholder-class="grary9"
            v-model="address.phone" :placeholder="$t('user.enter_recipient_phone')" />
        </view>
        <view class="d-s-c border-b-d9" @click="showMulLinkageThreePicker">
          <text class="key-name">{{ $t('user.location') }}</text>
          <view class="input-box flex-1">
            <input class="ml20 f32 flex-1 p-30-0" type="text" placeholder-class="grary9" placeholder=""
              v-model="selectCity" disabled="true" style="pointer-events: none" />
          </view>
        </view>
        <view class="d-s-c border-b-d9">
          <text class="key-name">{{ $t('user.detailed_address') }}</text>
          <textarea class="ml20 flex-1 p-30-0 lh150" name="detail" :auto-height="true" v-model="address.detail"
            placeholder-class="grary9" :placeholder="$t('user.enter_street_info')"></textarea>
        </view>
      </view>

      <view class="mt24"><button form-type="submit" class="add-btn theme-btn">{{ $t('user.save') }}</button>
      </view>
    </form>
    <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
      :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
  </view>
</template>

<script>
import mpvueCityPicker from "@/components/mpvue-citypicker/mpvueCityPicker.vue";
export default {
  components: {
    mpvueCityPicker,
  },
  data() {
    return {
      cityPickerValueDefault: [0, 0, 0],
      selectCity: this.$t('user.select_address'),
      provinceId: 3716,
      cityId: 3722,
      regionId: 3725,
      address: {},
      delta: 1,
      province: [],
      city: [],
      area: [],
      is_load: false,
    };
  },
  onLoad: function (options) {
    this.delta = options.delta;
    this.getData();
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t('order.add_address0')
    })
  },
  methods: {
    // 获取省市区
    getData() {
      let self = this;
      self._post("settings/getRegion", {}, function (res) {
        self.province = res.data[0];
        self.city = res.data[1];
        self.area = res.data[2];
        self.is_load = true;
        // 设置默认地址
        try {
          const provinceIdx = res.data[0].findIndex(item => item.value == self.provinceId);
          const cityIdx = res.data[1][provinceIdx].findIndex(item => item.value == self.cityId);
          const regionIdx = res.data[2][provinceIdx][cityIdx].findIndex(item => item.value == self.regionId);
          self.cityPickerValueDefault = [
            provinceIdx,
            cityIdx,
            regionIdx,
          ]
          self.$nextTick(() => {
            self.selectCity = self.$refs.mpvueCityPicker._getLabel()
          })
        } catch (e) {
          console.error(e)
        }

      });
    },
    /*提交*/
    formSubmit: function (e) {
      let self = this;
      var formdata = e.detail.value;
      formdata.provinceId = self.provinceId;
      formdata.cityId = self.cityId;
      formdata.regionId = self.regionId;
      console.log(formdata);
      if (formdata.name == "") {
        uni.showToast({
          title: self.$t('user.enter_recipient_name'),
          duration: 1000,
          icon: "none",
        });
        return false;
      }

      if (formdata.phone == "") {
        uni.showToast({
          title: self.$t('user.enter_mobile_number'),
          duration: 1000,
          icon: "none",
        });
        return false;
      }
      // 外地的不需要这个手机号规则
      // if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.phone)) {
      //   uni.showToast({
      //     title: self.$t('login.phone_error'),
      //     duration: 2000,
      //     icon: "none",
      //   });
      //   return false;
      // }

      // if (
      //   formdata.provinceId == 0 ||
      //   formdata.cityId == 0 ||
      //   formdata.regionId == 0
      // ) {
      //   uni.showToast({
      //     title: this.$t('user.select_full_address'),
      //     duration: 1000,
      //     icon: "none",
      //   });
      //   return false;
      // }

      // if (formdata.detail == "") {
      //   uni.showToast({
      //     title: this.$t('user.enter_street_info'),
      //     duration: 1000,
      //     icon: "none",
      //   });
      //   return false;
      // }
      self._postBody("user/address/add", formdata, function (res) {
        self.showSuccess(res.msg, function () {
          // #ifndef H5
          uni.navigateBack({
            delta: parseInt(self.delta),
          });
          // #endif
          // #ifdef H5
          history.go(-self.delta);
          // #endif
        });
      });
    },

    formReset: function (e) {
      console.log("清空数据");
    },

    /*三级联动选择*/
    showMulLinkageThreePicker() {
      this.$refs.mpvueCityPicker.show();
    },

    /*确定选择的省市区*/
    onConfirm(e) {
      console.log(e)
      this.selectCity = e.label;
      this.provinceId = e.cityCode[0];
      this.cityId = e.cityCode[1];
      this.regionId = e.cityCode[2];
    },
  },
};
</script>

<style lang="scss">
.address-list {
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.address-form .key-name {
  width: 240rpx;
  font-size: 28rpx;
}

.add-btn {
  position: fixed;
  left: 24rpx;
  bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  margin: 20rpx auto;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 692rpx;
  height: 88rpx;
  border-radius: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 800;
}
</style>
